import React, { Component } from 'react';
import api from '../../../../api'
import './style.css'


class SingerContent extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            initArticleList:[],
            sort:''
        }
    }

    componentDidMount(){
        api.getInitArticleList().then(res=>{
            console.log('歌手初始化列表',res.data.artists);
            
            this.setState({
                initArticleList:res.data.artists
            })
        })
    }
    componentWillReceiveProps(nextProps){
        console.log('分类列表传到内容区域的数据',nextProps);
        let a = nextProps.sort.toLowerCase()
        let b = nextProps.cat
        // console.log(a);
        api.getPublic(`/artist/list?cat=${b}&initial=${a}&offset=0`)
        .then(res => {
            console.log('选择分类的网络请求数据',res.data.artists)
            this.setState({
                initArticleList:res.data.artists
            })
        })
    }

    render() {
        
        return (
            <div>
                <div className="singer-list">
                    {
                        this.state.initArticleList.map((v, i) => {
                            return  <div className="list" key={i} >
                                <div className="singer-img">
                                    <img src={v.img1v1Url } alt="" />
                                </div>
                                <div className="singer-name">
                                    {v.name}
                                </div>
                            </div>
                        })
                    }

                </div>
            </div>
        );
    }
}

export default SingerContent;